<template>
<div class="bbg1" style="height:820px;padding-top:150px;">

	<div style="width:480px;margin:0 auto;background:rgba(19,90,108,0.9);border:1px solid rgba(60, 239, 241, 1);border-radius:2px;">
		<div style="padding: 15px 20px 15px 20px;background-image:linear-gradient(90deg, #11b0b5 10%, #116389 90%);color:#fff;">
			创建角色
		</div>

		<div style="margin-top:40px;">
			<el-form ref="form" :model="form" :rules="rules" label-width="120px"
			>

			  <el-form-item label="角色名称：" prop="role_name" >
			    <el-input v-model="form.role_name" style="width:330px;"></el-input>
			  </el-form-item>

			  <el-form-item label="角色ID：" prop="role_id" >
			    <el-input v-model="form.role_id" style="width:330px;"></el-input>
			  </el-form-item>

			</el-form>

			<el-row class="text-center mt30 mb30">
				<el-button type="primary" @click="onSubmit()"
			    style="width:160px;background:#19a65b;border:1px solid #1fe77c;"
			    >立即创建</el-button>
			</el-row>

		</div>
	</div>


</div>
</template>

<script>

import { mapGetters } from 'vuex'

export default {
	
	name : 'createRole',
	
	data () {
		return {
			roleDialogVisible : true,

		  	form : {
		  		role_name : '',
		  		role_id : '',
		  	},

		  	rules: {
				role_name: [
					{ required: true, message: '请输入角色名称', trigger: 'blur' },
				],
				role_id: [
					{ required: true, message: '请输入角色id', trigger: 'blur' },
				],
			},
		}
	},

	props : {

	},

	components : {
		
	},

	computed : {
		...mapGetters([
			
		]),
	},

	methods : {
		onSubmit () {
			this.$refs['form'].validate((valid) => {
	          if (valid) {
	            this.$http({
					fun : 'createRole',
					role_name : this.form.role_name,
					role_id : this.form.role_id,
					cb : res => {
						console.log(res);
						this.$router.push({
							name : 'roleList',
						});
					}
				});
	          } else {
	            console.log('error submit!!');
	            return false;
	          }
	        });
		},
	},

	watch : {
	    
	},

	mounted () {
		
	},

}
</script>

<style scoped>
/*.d1 {
	width: 1880px;
	height: 970px;
	background:rgba(8,55,73,0.7);
}*/
</style>
